<template>
  <div class="class_song">
    <Header title="新碟上架"></Header>
    <back-top></back-top>
    <div class="song_box">
      <!--<div class="collapse">
        &lt;!&ndash;accordion: 手风琴模式 simple:简洁模式&ndash;&gt;
        <Collapse v-model="value" accordion>
          <panel v-for="(panel, index) in categories" :key="index" :name="index">
            {{panel}}
            <div slot="content">
              <div class="content" v-if="panel=== '语种'">
                <ul class="phone_items">
                  <li class="item" v-for="(sub,index0) in subZero" :key="index0" @click="selectActive(sub.name,index0)">
                    <span class="title" :class="{active:index0 === tabIndex}">
                      {{sub.name}}
                    </span>
                  </li>
                </ul>
              </div>
              <div class="content" v-if="panel=== '风格'">
                <ul class="phone_items">
                  <li class="item" v-for="(sub,index1) in subOne" :key="index1" @click="selectActive(sub.name,index1)">
                    <span class="title" :class="{active:index1 === tabIndex}">
                      {{sub.name}}
                    </span>
                  </li>
                </ul>
              </div>
              <div class="content" v-if="panel=== '场景'">
                <ul class="phone_items">
                  <li class="item" v-for="(sub,index2) in subTwo" :key="index2" @click="selectActive(sub.name,index2)">
                    <span class="title" :class="{active:index2 === tabIndex}">
                      {{sub.name}}
                    </span>
                  </li>
                </ul>
              </div>
              <div class="content" v-if="panel=== '情感'">
                <ul class="phone_items">
                  <li class="item" v-for="(sub,index3) in subThree" :key="index3" @click="selectActive(sub.name,index3)">
                    <span class="title" :class="{active:index3 === tabIndex}">
                      {{sub.name}}
                    </span>
                  </li>
                </ul>
              </div>
              <div class="content" v-if="panel=== '主题'">
                <ul class="phone_items">
                  <li class="item" v-for="(sub,index4) in subFour" :key="index4" @click="selectActive(sub.name,index4)">
                    <span class="title" :class="{active:index4 === tabIndex}">
                      {{sub.name}}
                    </span>
                  </li>
                </ul>
              </div>
            </div>
          </panel>
        </Collapse>
      </div>-->
      <div class="grid">
        <Row :gutter="5">
          <!--col的总和为24-->
          <i-col span="8" v-for="(mv,mindex) in albums" :key="mindex" @click.native="goDetail(mv.id)">
            <div class="grid_div">
              <img v-lazy="mv.blurPicUrl" alt="">
            </div>
            <h3>{{mv.name}}</h3>
            <p>{{mv.artists[0].name}}</p>
          </i-col>
        </Row>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from '../footer/Footer'
import Header from '../Header/Header'
import backTop from '../backtop/src/main'
import {getCatList, newAlbum} from '../../api/node'

export default {
  name: 'PageThree',
  data () {
    return {
      tabIndex: -1, // 选择item主题的index
      value: '1',
      categories: [],
      activeClick: false,
      subZero: [], // 语种
      subOne: [], // 风格
      subTwo: [], // 场景
      subThree: [], // 情感
      subFour: [], // 主题
      albums: []
    }
  },
  created () {
    getCatList().then(res => {
      // console.log(res)
      if (res.code === 200) {
        this.categories = res.categories
        var subArray = res.sub
        // console.log(this.subList)
        var Zero = []
        var One = []
        var Two = []
        var Three = []
        var Four = []
        subArray.forEach((item, index) => {
          if (item.category === 0) {
            Zero.push(item)
            this.subZero = Zero
            // console.log(this.subZero)
          }
          if (item.category === 1) {
            One.push(item)
            this.subOne = One
          }
          if (item.category === 2) {
            Two.push(item)
            this.subTwo = Two
          }
          if (item.category === 3) {
            Three.push(item)
            this.subThree = Three
          }
          if (item.category === 4) {
            Four.push(item)
            this.subFour = Four
          }
        })
      }
    })
    newAlbum().then(res => {
      // console.log(res)
      if (res.code === 200) {
        this.albums = res.albums
        // console.log(this.albums)
      }
    })
  },
  methods: {
    selectActive (type, index) {
      this.tabIndex = index
      // this.$router.push('/songTag')
    },
    goDetail (id) {
      this.$router.push('/songDetail/' + id)
    }
  },
  components: {
    Footer,
    Header,
    backTop
  }
}
</script>

<style lang="scss" scoped>
.class_song{
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
  .selected {
    border: 1px solid black;
  }
  .song_box{
    width: 100%;
    .collapse{
      width: 100%;
      .content{
        width: 100%;
        .phone_items {
          padding-bottom: 20px;
          display: inline;
          justify-content: space-between;
          .item {
            width: 33.33%;
            height: 40px;
            display: inline-block;
            line-height: 45px;
            text-align: center;
            margin-top: 5px;
            .title {
              border: 1px solid #d9d9d9;
              padding: 10px 11px;
              border-radius: 3px;
              color: #292929;
            }
            .active {
              border: 1px solid #de172c;
              padding: 10px 11px;
              border-radius: 3px;
              color: #de172c;
            }
          }
        }
      }
    }
    .grid{
      padding-top: 10px;
      .ivu-row{
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
      .ivu-col-span-8 {
        padding-bottom: 20px;
        .grid_div{
          height: 100px;
          background-size: 100% 100%;
          img{
            width: 120px;
          }
          img[lazy=loading] {
            height: 100px;
            margin: auto;
            background: url("../../assets/Image/lazy.png") no-repeat fixed center;
          }
        }
        h3{
          font-weight: normal;
          font-size: 15px;
          padding-top: 25px;
          color: #000;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        p{
          font-size: 12px;
          color: #666;
        }
      }
    }
  }
}
</style>
